<template>
    <el-form :inline="true" style="width: 1100px;height: 100px;">
        <el-form-item label="单位编号">
            <el-input placeholder="请输入" v-model="page.unitAppCode"></el-input>
        </el-form-item>
        <el-form-item label="单位名称">
            <el-input placeholder="请输入" v-model="page.unitAppName"></el-input>
        </el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
    </el-form>
    <!-- 数据列表区域 -->
    <div class="action-buttons">

        <el-button type="success" @click="tk.IsAdd = true" round>新增</el-button>
        <el-button type="warning" @click="tk.IsUpdate = true" round>编辑</el-button>

        <!--<el-button type="danger" @click="handleClickShow" :loading="isDeleting" round>删除</el-button>
            <el-button color="#626aef">刷新</el-button>
            <el-button type="primary" @click="commandShow">导出</el-button> -->
    </div>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="100" />
        <el-table-column type="index" label="序号" width="160" />
        <el-table-column prop="unitAppCode" label="单位编号" width="220" />
        <el-table-column prop="unitAppName" label="单位名称" width="220" />
        <el-table-column prop="unitDescription" label="备注" width="150" />
        <el-table-column label="操作" width="160">
            <template #default="scoped">
                <el-button type="danger" @click="del(scoped.row.unitAppId)" size="small">删除</el-button>
                <el-button type="text" size="small" @click="upd(scoped.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 弹框新增 -->
    <el-dialog v-model="tk.IsAdd" title="单位新增" width="500" draggable>
        <template #footer>
            <div class="dialog-footer">
                <el-form-item label="单位编号">
                    <el-input v-model="bd.unitAppCode" disabled />
                </el-form-item>

                <el-form-item label="单位名称">
                    <el-input v-model="bd.unitAppName" />
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="bd.unitDescription" />
                </el-form-item>

                <el-button @click="tk.IsAdd = false">取消</el-button>
                <el-button type="primary" @click="Save">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 弹框修改 -->
    <el-dialog v-model="tk.IsUpdate" title="单位修改" width="500" draggable>
        <template #footer>
            <div class="dialog-footer">
                <el-form-item label="单位编号">
                    <el-input v-model="bd.unitAppCode" disabled />
                </el-form-item>

                <el-form-item label="单位名称">
                    <el-input v-model="bd.unitAppName" />
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="bd.unitDescription" />
                </el-form-item>

                <el-button @click="tk.IsUpdate = false">取消</el-button>
                <el-button type="primary" @click="update">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 分页组件 -->
    <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize" :page-sizes="[5, 10, 15, 20]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.TotalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

// 分页
const page = reactive({
    PageIndex: 1,
    PageSize: 15,
    TotalCount: 0,
    PageCount: 0,
    "unitAppCode": "",
    "unitAppName": "",
});

const bd = reactive({
    unitAppId: 0,
    unitAppCode: "",
    unitAppName: "",
    unitDescription: "",
});

// 弹框
const tk = reactive({
    // 新增
    IsAdd: false,
    // 编辑
    IsUpdate: false,
});

//分页查询
const query = () => {
    axios.get("http://localhost:5042/api/UnitManage/GetUnit", {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
            unitAppCode: page.unitAppCode,
            unitAppName: page.unitAppName
        }
    }).then(res => {
        tableData.value = res.data.lists;
        page.TotalCount = res.data.totalCount;
        page.PageCount = res.data.pageCount;
    });
}
// 单位新增
const Save = () => {
    if (bd.unitAppName == "") {
        ElMessage.error("单位名称不能为空");
        return;
    }
    axios.post("http://localhost:5141/api/UnitManage/UnitAdd", bd).then(res => {
        if (res.data.code == 200) {
            ElMessage.success("添加成功");
            tk.IsAdd = false;
            query();
        }
        else {
            ElMessage.error("添加失败");
        }
    });
};
// 反填
const upd = (row: any) => {
    bd.unitAppId = row.unitAppId;
    bd.unitAppCode = row.unitAppCode;
    bd.unitAppName = row.unitAppName;
    bd.unitDescription = row.unitDescription;
    tk.IsUpdate = true;
};

// 修改
const update = (row: any) => {
    axios.put("http://localhost:5141/api/UnitManage/UnitUpd", bd)
        .then(res => {
            if (res.data.code == 400) {
                ElMessage.success(res.data.msg);
                tk.IsUpdate = false;
                query();
            }
            else {
                ElMessage.error(res.data.msg);
                return;
            }
        });
};

// 单删除
const del = (unitAppId: any) => {
    ElMessageBox.confirm("是否确认删除?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
    }).then(() => {
        axios.delete("http://localhost:5141/api/UnitManage/UnitDel", {
            params: {
                UnitAppId: unitAppId
            }
        }).then((res) => {
            if (res.data.code == 300) {
                ElMessage.success(res.data.msg);
                query();
            } else {
                ElMessage.error(res.data.msg);
            }
        });
    });
};


// 多选按钮存入数据
const selectedRows = ref<any[]>([]); // 存储选中行的数据

// 多选事件回调
const handleSelectionChange = (rows: any[]) => {
    selectedRows.value = rows; // 将选中的行数据保存到变量中
};

// 模拟数据
const tableData = ref([])
const generateCode = () => {
    const characters = "0123456789";
    let result = "";
    for (let i = 0; i < 12; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result; // 添加返回语句
}

onMounted(() => {
    query();
    bd.unitAppCode = generateCode();
})

// 重置方法
const reset = () => {
    bd.unitAppCode = '';
    bd.unitAppName = '';
};

// 分页
const handleSizeChange = (index: any) => {
    page.PageSize = index;
    query();
};

const handleCurrentChange = (index: any) => {
    page.PageIndex = index;
    query();
};


</script>

<style scoped>
.container {
    padding: 20px;
}

.filter-container {
    margin-bottom: 20px;
}

.table-container {
    border: 1px solid #ebeef5;
}
</style>